<template>
  <div class="user-container">
    <div class="nav">
      <span v-if="deuser" @click="uplogin">退出登陆</span>
    </div>

    <div class="avatar">
      <div class="img">
        <img v-if="!deuser" @click="$router.push('/login')" src="@/assets/additional/uncomplete.png" />
        <img v-else src="@/assets/home/CAT.jpg" />
      </div>
      <div class="nav-item">
        <h2 v-if="!deuser">
          <span @click="$router.push('/login')">登陆</span>
          <span>/</span>
          <span @click="$router.push('/register')">注册账号</span>
        </h2>
        <h2 v-else>{{ customer }}</h2>
        <div class="an">
          <p v-if="!deuser">解锁收藏、云端同步功能、收藏内容不丢失</p>
          <p v-if="deuser" class="an-text">唯有美食不可辜负！</p>
        </div>
      </div>
    </div>
    <van-cell icon="star-o" size="16" title="菜谱收藏" is-link to="/bookmark" />
    <van-cell icon="clock-o" title="历史记录" is-link to="/historicalhistory" />
    <van-cell icon="good-job-o" title="用着不错，赏个好评去" is-link url="https://m.ddooo.com/softdown/165400.htm" />
    <van-cell icon="warning-o" title="关于我们" is-link to="/aboutus" />
    <van-cell icon="records" title="反馈" is-link @click="$router.push('/userfeedback')" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: '',
      deuser: false,
      customer: ''
    }
  },
  methods: {
    uplogin() {
      localStorage.removeItem('curUser')
      this.deuser = false
      this.$router.push('/login')
    }
  },
  created() {
    if (localStorage.getItem('curUser')) {
      this.deuser = true
      this.customer = `用户${localStorage.getItem('curUser')}`
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  /deep/.van-cell {
    font-size: 16px;
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    font-size: 20px;
    width: 24px;
  }
  .nav {
    text-align: right;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #4f4f4f;
  }

  .avatar {
    .img {
      display: flex;
      justify-content: center;
      margin: 20px 0 15px;
      border-radius: 50%;
      height: 75px;

      img {
        border-radius: 50%;
      }
    }

    .nav-item {
      position: relative;

      h2 {
        display: flex;
        justify-content: center;
        color: #676767;
        font-size: 18px;
      }

      .an {
        width: 100%;
        display: flex;
        justify-content: center;

        p {
          width: 185px;
          text-align: center;
          color: #7d7d7d;
          font-size: 14px;
          font-weight: bold;
          margin: 10px 0;
        }

        .an-text {
          font-size: 16px;
          color: #ffcfc4;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
      }
    }
  }
}
</style>
